<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <button @click="canDo">奏效的改变</button>
        <button @click="noDo">不奏效的改变</button>

        <h1 v-for="s in students">
            我叫{{s.name}}，今年{{s.age}}岁
        </h1>


        <p>vue处理数据步骤</p>
        <p>1.先处理一下你的data</p>
        <p>2.vm._data = data</p>
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: '#root',
        data: {
            students: [
                {
                    name: "张三",
                    age: '18'
                },
                {
                    name: '王麻子',
                    age: '86'
                }, {
                    name: "李磊",
                    age: '53'
                }
            ]
        },
        methods: {
            canDo() {
                this.students[0].name = '茅斯'
                this.students[0].age = '65'
                console.log(vm.students)
                console.log("数据和页面都发生了变化")
            },
            noDo() {
                this.students[0] = {
                    name: "王八",
                    age: '08'
                }
                console.log(vm.students)
                console.log("数据发生了变化但是页面没有动静")
            }
        },
    })
</script>

</html>